<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>sl-ui</title>
    <script src="../vue.js"></script>
    <script src="../config.js"></script>
    <script src="../dist/sl-ui.js"></script>
    <style type="text/css">
        a[href='http://www.layui.com/doc/modules/code.html'] { display: none; }
    </style>
</head>
<body>
    <div id="app" style="padding:0 150px;">
        <h1 style="font-size:24px;margin: 15px 0;">
            <span>按钮组件演示</span>
            <span style="font-size:12px;">页面代码使用了es6语法，请使用谷歌浏览器打开</span>
            <a  style="font-size:15px;color: #001dff;" href="https://gitee.com/weifashi/sl-ui-show">下载示例文件</a>
        </h1>
        <h2 style="font-size:14px;margin: 15px 0;">缩放浏览器的窗口大小将会看到固定列的效果</h2>
        
        <!--按钮组件-->
        <sl-button type="primary" text="默认配置" @click="clickEvent"></sl-button>
        <sl-button text="自定义" @click="clickEvent" bg-color="red" hover-bg-color="#de0303" color="#fff" round="0"></sl-button>
        <sl-button type="default" text="白色背景" @click="clickEvent" ></sl-button>
        <sl-button type="info" text="信息类型" @click="clickEvent" :show-icon="false"></sl-button>
        <sl-button type="success" text="成功类型" @click="clickEvent" :show-icon="false"></sl-button>
        <sl-button type="warning" text="警告类型" @click="clickEvent" :show-icon="false"></sl-button>
        <sl-button text="更多">
            <dd @click="">选中行</dd>
            <dd @click="">取消选中</dd>
        </sl-button>
        
        <!--html-->
        <h1  style="font-size:24px;margin:15px 0;">vue配置-以下大部分配置都可以丢到Vue.prototype.$slConfig对象中进行全局定义</h1>
        <pre class="layui-code" style="display: none;"> 
        &lt;sl-button type=&quot;primary&quot; text=&quot;&#x9ED8;&#x8BA4;&#x914D;&#x7F6E;&quot; @click=&quot;clickEvent&quot;&gt;&lt;/sl-button&gt;
        &lt;sl-button text=&quot;&#x81EA;&#x5B9A;&#x4E49;&quot; @click=&quot;clickEvent&quot; bg-color=&quot;red&quot; hover-bg-color=&quot;#de0303&quot; color=&quot;#fff&quot; round=&quot;0&quot;&gt;&lt;/sl-button&gt;
        &lt;sl-button type=&quot;default&quot; text=&quot;&#x767D;&#x8272;&#x80CC;&#x666F;&quot; @click=&quot;clickEvent&quot; &gt;&lt;/sl-button&gt;
        &lt;sl-button type=&quot;info&quot; text=&quot;&#x4FE1;&#x606F;&#x7C7B;&#x578B;&quot; @click=&quot;clickEvent&quot; :show-icon=&quot;false&quot;&gt;&lt;/sl-button&gt;
        &lt;sl-button type=&quot;success&quot; text=&quot;&#x6210;&#x529F;&#x7C7B;&#x578B;&quot; @click=&quot;clickEvent&quot; :show-icon=&quot;false&quot;&gt;&lt;/sl-button&gt;
        &lt;sl-button type=&quot;warning&quot; text=&quot;&#x8B66;&#x544A;&#x7C7B;&#x578B;&quot; @click=&quot;clickEvent&quot; :show-icon=&quot;false&quot;&gt;&lt;/sl-button&gt;
        &lt;sl-button text=&quot;&#x66F4;&#x591A;&quot;&gt;
            &lt;dd @click=&quot;&quot;&gt;&#x9009;&#x4E2D;&#x884C;&lt;/dd&gt;
            &lt;dd @click=&quot;&quot;&gt;&#x53D6;&#x6D88;&#x9009;&#x4E2D;&lt;/dd&gt;
        &lt;/sl-button&gt;
        </pre>
        <h1 style="font-size:24px;margin: 15px 0;">script</h1>
        <pre class="layui-code script-code" style="display: none;"> </pre>
    </div>

    <script id="script">
        new Vue({
            el: '#app',
            methods: {
                clickEvent(){
                    alert("点击事件")
                }
            }
        })
    </script>

    <link rel="stylesheet" type="text/css" href="../layui/css/layui.mobile.css" />
    <script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        layui.use('code', function() {
            document.querySelector(".script-code").innerHTML = document.querySelector("#script").innerHTML;
            document.querySelectorAll(".layui-code")[0].style.display = "block";
            document.querySelectorAll(".layui-code")[1].style.display = "block";
            layui.code();
        });
    </script>
</body>
</html>